<template>
	<view class="">
		<u-navbar :title="state=='2'?'申请退货':'申请退款'"></u-navbar>
		<view class="title">
			{{state=="2"?'退货原因':'退款原因'}}
		</view>
		<view class="box" @click="reason">
			<text>{{state=="2"?tuihuan:tuikuan}}</text>
			<view class="angle"></view>
		</view>
		<view class="box" v-if="state==1">
			<text>退款金额</text>
			<view class="jine"><text>￥</text>{{obj.money}}</view>
		</view>
		<view class="box" v-if="state==2">
			<text>寄回单号</text>
			<input type="text" value="" placeholder="示例：YD459320" v-model="order" />
		</view>

		<view class="boxs" v-if="state==2">
			<view class="site">
				收货地址
			</view>
			<view class="btnbox">
				<view class="leftbox">
					<view class="sjck">
						<text>{{obj.receiving_address.consignee}}</text>
						<text class="dh">{{obj.receiving_address.contact_information}}</text>
					</view>
					<view class="dz">
						{{obj.receiving_address.receiving_address}}
					</view>
				</view>
				<view class="angle"></view>
			</view>
		</view>
		<view class="title">
			问题描述
		</view>
		<view class="areabox">
			<textarea value="" :placeholder="state==1?'请输入您的退款问题描述':'请输入您的退货问题描述'" v-model="remark" />
		</view>
		<view class="title">
			上传图片<text>最多3张</text>
		</view>
		<view class="upimg">
			<UpLoadimg :imgList="imglist" :imgMaxNum="3" @deleteImg="deleteImg" @successImg="successImg"></UpLoadimg>
		</view>
		<view class="title">
			联系方式
		</view>
		<view class="userifo">
			联系人：{{obj.contacts.contacts}}
		</view>
		<view class="userifo">
			联系电话：{{obj.contacts.contact_number}}
		</view>
		<view class="submit" @click="submit">
			提交
		</view>
		<u-picker mode="selector" v-model="show" :default-selector="[0]" confirm-color="#FF6666" @confirm="queren"
			:range="selector"></u-picker>
	</view>
</template>

<script>
	import BaseUpdate from "../../components/BaseUpdate/index.vue"
	import UpLoadimg from "../../components/UpLoadimg/index.vue"

	import {
		getreasongoods,
		getsaleinfo,
		changeaftersale
	} from "../../api/api/index.js"
	export default {
		data() {
			return {
				// 演示地址，请勿直接使用
				action: 'http://www.example.com/upload',
				fileList: [],
				state: null, //1退款，2退货
				show: false,
				selector: [],
				tuihuan: "请选择退货原因",
				tuikuan: "请选择退款原因",
				imglist: [],
				// 订单id
				id: 0,
				obj: {},
				// 订单号
				order: "",
				// 描述
				remark: ""
			}
		},
		methods: {
			// 提交申请
			submit() {
				let imglist = []
				let that = this
				for (let i = 0; i < this.imglist.length; i++) {
					imglist.push(this.imglist[i].url)
				}
				let imgs = imglist.toString()
				uni.showLoading({
					title: "申请中"
				})
				let data = {}
				if (this.state == 1) {
					data = {
						type: 2,
						settlement_id: this.id,
						reason: this.tuikuan,
						describe: this.remark,
						imgs: imgs
					}
				}
				if (this.state == 2) {
					data = {
						type: 1,
						settlement_id: this.id,
						order: this.order,
						reason: this.tuihuan,
						describe: this.remark,
						imgs: imgs
					}
				}
				changeaftersale(data).then(res => {
					uni.hideLoading()
					uni.showToast({
						title: res.msg,
						icon: "none",
						duration: 2000
					})
					setTimeout(function() {
						that.jumpLink({
							link: "/pages/exchange/index",
							query:{id:that.id}
						})
					}, 2000)
				})


			},
			// 选择原因
			reason() {
				this.show = true
			},
			// 选中原因
			queren(e) {
				this.tuikuan = this.selector[e[0]]
			},
			successImg(data) {
				this.imglist.push(data)
			},
			deleteImg(index) {
				this.imglist.splice(index, 1)
			},
			public() {
				uni.showLoading({
					title: "加载中"
				})
				getsaleinfo({
					id: this.id
				}).then(res => {
					uni.hideLoading()
					console.log(res.data)
					this.obj = res.data
				})
			}
		},
		components: {
			BaseUpdate,
			UpLoadimg
		},
		onLoad(e) {
			this.state = e.state
			this.id = e.id
		},
		onShow() {
			getreasongoods().then(res => {
				for (let i = 0; i < res.data.length; i++) {
					this.selector.push(res.data[i].name)
				}
			})
			this.public()
		}
	}
</script>

<style lang="scss" scoped>
	.title {
		font-family: MicrosoftYaHei-Bold;
		font-size: 28rpx;
		color: #333333;
		font-weight: 700;
		margin-top: 45rpx;
		margin-left: 29rpx;

		text {
			font-family: MicrosoftYaHei;
			font-size: 20rpx;
			color: #666666;
			margin-left: 10rpx;
		}
	}

	.box {
		background-color: #FFFFFF;
		width: 700rpx;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		margin-left: 29rpx;
		background-color: #ffffff;
		border-radius: 6rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 20rpx;

		.angle {
			width: 20rpx;
			height: 20rpx;
			border-top: 1px solid #000;
			border-left: 1px solid #000;
			transform: rotate(135deg)
		}

		.jine {
			font-family: PingFang-SC-Medium;
			font-size: 30rpx;
			color: #ff3333;

			text {
				font-size: 20rpx;
			}
		}

		input {
			width: 500rpx;
			font-family: MicrosoftYaHei;
			font-size: 24rpx;
		}
	}

	.boxs {
		background-color: #FFFFFF;
		width: 700rpx;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		margin-left: 29rpx;
		background-color: #ffffff;
		border-radius: 6rpx;
		margin-top: 20rpx;

		.btnbox {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 30rpx;

			.angle {
				width: 20rpx;
				height: 20rpx;
				border-top: 1px solid #000;
				border-left: 1px solid #000;
				transform: rotate(135deg)
			}

			.leftbox {
				.sjck {
					font-family: MicrosoftYaHei-Bold;
					font-size: 28rpx;
					color: #333333;
					font-weight: 700;

					.dh {
						font-family: MicrosoftYaHei;
						font-size: 24rpx;
						color: #282828;
						font-weight: 400;
						margin-left: 37rpx;
					}
				}

				.dz {
					font-family: MicrosoftYaHei;
					font-size: 24rpx;
					color: #282828;
					margin-top: 20rpx;
				}


			}
		}

		.site {
			font-family: MicrosoftYaHei;
			font-size: 24rpx;
			color: #333333;
		}
	}

	.areabox {
		width: 700rpx;
		height: 223rpx;
		background-color: #ffffff;
		border-radius: 6rpx;
		margin-left: 25rpx;
		margin-top: 20rpx;
		padding: 20rpx;
		box-sizing: border-box;

		textarea {
			width: 100%;
			height: 100%;
		}
	}

	.upimg {
		margin-top: 10rpx;
		margin-left: 25rpx;
	}

	.userifo {
		font-family: MicrosoftYaHei;
		font-size: 22rpx;
		color: #333333;
		margin-left: 25rpx;
		margin-top: 20rpx;
	}

	.submit {
		width: 586rpx;
		height: 70rpx;
		background-color: #ff7e65;
		border-radius: 35rpx;
		line-height: 70rpx;
		text-align: center;
		color: #FFFFFF;
		font-family: MicrosoftYaHei;
		font-size: 26rpx;
		margin: 116rpx auto;

	}
</style>
